<!--楼宇设备-->
<template>
  <div class="mainSon">
    <div class="peopleMain">
      <!--头部-->
      <div class="mainUpStyle">
        <div class="upStyle">
          <span>仓库搜索</span>
        </div>
        <form action="/">
          <div class="upSearchStyle">
            <van-search
              v-model="inputSearchValue"
              placeholder="请输入房间名称进行查找"
              input-align="center"
              clear-trigger="focus"
              left-icon="none"
              class="searchMainStyle"
            />
            <div class="upSearchImgStyle" @click="searchPeopleHandle"/>
          </div>
        </form>
      </div>

      <!--数据-->
      <van-row class="listCard">
        <van-pull-refresh
          v-if="dataList.length"
          class="cardVanPullRefresh1"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="已经到底啦!"
            @load="nextPage"
          >
            <div v-for="item in dataList" class="dataStyle" @click="checkPeople(item)">
              <div class="picMainStyle">
                <div v-if="item.pic && item.pic.length > 0" class="peoplePicStyle">
                  <img :src="item.pic"/>
                </div>
                <div v-else class="peoplePicDefaultStyle"/>
              </div>
              <div class="textMainStyle">
                <div>
                  {{ item.FANGCNAME }}
                </div>
                <div>
                  <div class="van-ellipsis">
<!--                  <van-tag
                      round
                      type="primary"
                      color="#1989fa54"
                      class="tagStyle tagLeft van-ellipsis">
                      {{ item.FANGCNAME && item.FANGCNAME != null && item.FANGCNAME != '' ? item.FANGCNAME : '暂无楼宇' }}
                    </van-tag>-->

                    <van-tag
                      round
                      type="primary"
                      color="rgb(189 123 13 / 18%)"
                      class="tagStyle tagMid van-ellipsis">
                      {{ item.LOUCNAME && item.LOUCNAME != null && item.LOUCNAME != '' ? item.LOUCNAME : '暂无楼层' }}
                    </van-tag>
                    /
                    <van-tag
                      round
                      type="primary"
                      color="#00000021"
                      class="tagStyle tagRight van-ellipsis">
                      {{ item.NAME && item.NAME != null && item.NAME != '' ? item.NAME : '暂无房间' }}
                    </van-tag>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>

        <van-pull-refresh
          v-else
          class="cardVanPullRefresh2"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-empty
            class="custom-image"
            :image="require('../../../assets/images/nx/icon_common_empty.png')"
            description="暂无数据"/>
        </van-pull-refresh>
      </van-row>

    </div>
  </div>

</template>
<script>
  import {queryCk,tuih} from '@/api/srvAssurance/assetLabel/assetLabel';

  export default {
    name: 'NaihuanCk',
    components: {},

    data() {
      return {
        inputSearchValue: "",

        loading: false,
        finished: false,
        refreshing: false,

        dataList: [],
        queryParam: {
          fangjmc: null,
          pageIndex: 1,
          pageSize: 10,
        },
      }
    },
    created() {
      let data = this.$route.query.dataInfo;
      if (JSON.stringify(data) != '"[object Object]"') {
        this.dataInfo = data;
        sessionStorage.setItem("inspectionView-dataInfo", JSON.stringify(data));
      } else {
        var item = sessionStorage.getItem("inspectionView-dataInfo");
        var dataParse = JSON.parse(item);
        this.dataInfo = dataParse;
      }
      this.initData();
    },
    methods: {
      searchPeopleHandle() {
        this.initData();
      },

      open() {
        this.visible = true;
        this.initData();
      },

      onRefresh() {
        this.initData();
      },

      async initData() {
        this.queryParam.pageIndex = 1;
        this.finished = false;
        this.refreshing = true;
        await this.getDataList();
        this.refreshing = false;
      },


      // 加载下一页
      nextPage() {
        // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
        if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
          this.finished = true;
          return;
        }
        setTimeout(() => {
          this.queryParam.pageIndex += 1;
          this.getDataList()
        }, 1000);
      },

      async getDataList() {
        this.loading = true;
        this.queryParam.fangjmc = this.inputSearchValue;
        let res = await queryCk(this.queryParam);
        if (res.status == 0) {
          if (this.queryParam.pageIndex == 1) {
            // 清空列表数据
            this.dataList = [];
          }
          this.dataList = this.dataList.concat(res.data);
          // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
          if (this.dataList.length >= res.totalCount) {
            this.finished = true;
          }
        }
        this.loading = false;
      },

      async checkPeople(item) {
        if(this.dataInfo.id == '' || this.dataInfo.id == null){
          this.$toast('请先扫描资产');
          return;
        }
        this.loading = true;
        this.queryParam.type = this.dataInfo.shebType;
        this.queryParam.shebid = this.dataInfo.id;
        this.queryParam.louyid = item.LYID;
        this.queryParam.loucid = item.LCID;
        this.queryParam.fangjid = item.ID;
        let res = await tuih(this.queryParam);
        if (res.status == 0) {
          this.$toast(res.message);
        }
        this.loading = false;
      },

    }
  }
</script>

<style scoped lang="less">
  .mainSon {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 15;
    background: #fff;

    .peopleMain {
      height: 100%;
      background-color: #80808017;

      .mainUpStyle {
        background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(14 150 216)), to(rgba(14, 150, 216, 0.53)));
        .upStyle {
          width: 100%;
          height: 55px;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            color: #ffff;
            font-size: 20px;
            font-weight: 500;
          }
        }

        .upSearchStyle {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .searchMainStyle {
            background-color: transparent;
            width: 80%;
            padding: 10px;

            /deep/ .van-search__content {
              border-radius: 10px;
            }
          }

          .upSearchImgStyle {
            width: 7%;
            height: 30px;
            background: url('../../../assets/images/nx/icon_search.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }


      .listCard {
        height: calc(100% - 140px);
        width: 100%;
        z-index: 999;
        overflow: auto;
        justify-content: flex-start;
        align-items: center;

        .cardVanPullRefresh1 {
          min-height: 100%;

          .dataStyle {
            padding: 10px;
            height: 60px;
            margin: 10px;
            background-color: #FFFFFF;
            border-radius: 10px;

            //.peoplePicStyle{
            //  height: 20px;
            //  width: 20px;
            //  text-align: center;
            //  background: url('../../../assets/images/nx/icon_staff.png') no-repeat;
            //  background-size: 100% 100%;
            //}

            .peoplePicDefaultStyle {
              width: 60%;
              height: 60%;
              margin: 20%;
              text-align: center;
              background: url('../../../assets/images/nx/icon_staff.png') no-repeat;
              background-size: 100% 100%;
            }

            .picMainStyle {
              width: 20%;
              float: left;
              height: 100%;
            }

            .textMainStyle {
              width: 80%;
              float: right;
              height: 100%;
              justify-content: space-around;
              align-items: flex-start;
              display: flex;
              flex-wrap: nowrap;
              flex-direction: column;

              .tagStyle {
                padding: 2px 4px;
                border-radius: 5px;
              }

              .tagLeft {
                color: blue !important;
              }

              .tagMid {
                color: orange !important;
              }

              .tagRight {
                color: gray !important;
              }
            }
          }

          .custom-image {
            height: 100%;
          }
        }

        .cardVanPullRefresh2 {
          height: 100%;

          //.dataStyle {
          //  padding: 10px;
          //  height: 60px;
          //  margin: 10px;
          //  background-color: #FFFFFF;
          //  border-radius: 10px;
          //}

          .custom-image {
            height: 100%;
          }
        }
      }
    }
  }

</style>
